<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<!-- 引入VUE -->
        <script src="./js/vue.js"></script>
	</head>
	<body>
		<!-- 
			v-for指令
				1.用于展示列表数据
				2.语法:v-for='(iterm,index) in xxx' :key='yyy'
				3.可遍历:数组,对象,字符串(用的很少),指定次数(用得很少)
		 
		 -->
		<div id="root">
			<h2>人员列表</h2>
			<!-- 遍历数组 -->
			<ul>
				<li v-for="(item,index) in persons" :key='item.id'>{{item.name}}-{{item.age}}-{{index}}</li>
			</ul>
			<hr >
			<ul>
				<li v-for="(item,index) of persons" :key='item.id'>{{item.name}}-{{item.age}}-{{index}}</li>
			</ul>
			<hr >
			<!-- 遍历对象 -->
			<h2>汽车信息</h2>
			<ul>
				<li v-for="(value,key) in car" :key='key'>{{key}}--{{value}}</li>
			</ul>
			<hr >
			<!-- 遍历字符串 -->
			<ul>
				<li v-for="(char,index) in str">{{char}}--{{index}}</li>
			</ul>
			<hr >
			<!-- 遍历指定次数 -->
			<ul>
				<li v-for="(n,index) in 5">{{n}}---{{index}}</li>
			</ul>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:"#root",
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					],
					car:{
						name:'奥迪A8',
						price:'70万',
						color:'黑色'
					},
					str:'hello'
				}
			})
		</script>
	</body>
</html>